import { useEffect, useState, useContext } from "react";
import { IconArrowLeft } from "@arco-design/web-react/icon";

export default function (props) {
    const [firstRender, setFirstRender] = useState(false);
    useEffect(()=>{
        if(props.visible && !firstRender){
            setFirstRender(true)
        }
    },[props.visible])
    return (
        <>
            {firstRender && (
                <div className={`absolute w-full h-full flex flex-col transition-all bg-white ${props.visible ? "left-0" : "left-full"}`}>
                    <div className="border-b-default px-4 items-center flex h-12 font-bold text-sm">
                        {props.isBack && <IconArrowLeft className="mr-2 cursor-pointer" onClick={() => props.onBack && props.onBack()} />}
                        {props.header}
                    </div>
                    <div className="overflow-x-hidden overflow-y-auto flex-1 relative">{props.children}</div>
                    {props.footer && <div className="p-3 border-l-0 border-r-0 border-b-0 border border-gray-200 border-t">{props.footer}</div>}
                </div>
            )}
        </>
    );
}
